<template>
  <div class="fw">
    <occupation-table height="100%" :data="occupationData" show-summary>
      <el-table-column prop="职业" label="职业"></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :label="item.label"
        :width="item.width"
        :key="index"
        :prop="item.prop"
        align="right"
        head-align="center"
      >
        <template #default="{ row }">
          <span class="number">{{ formatNumber(row[item.prop]) }}</span>
          <span class="percent" :style="{ '--max': occupationMax[item.prop], '--value': row[item.prop] }"></span>
        </template>
      </el-table-column>
    </occupation-table>
  </div>

  <div class="fw mt-20 percent-table">
    <occupation-table height="100%" :data="groupData" show-summary>
      <el-table-column prop="团长" label="团长"></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :label="item.label"
        :width="item.width"
        :key="index"
        :prop="item.prop"
        align="right"
        head-align="center"
      >
        <template #default="{ row }">
          <span class="number">{{ formatNumber(row[item.prop]) }}</span>
          <span class="percent" :style="{ '--max': groupMax[item.prop], '--value': row[item.prop] }"></span>
        </template>
      </el-table-column>
    </occupation-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { useStore } from "vuex";
import occupationTable from "@/components/occupation-table.vue";

const store = useStore();
const datas = ref(store.getters.getOverviewData);
const occupationData = ref([]);
const occupationMax = ref({});
const groupData = ref([]);
const groupMax = ref({});
const columns = [
  {
    label: "人数",
    prop: "人数",
  },
  {
    label: "击败",
    prop: "击败",
  },
  {
    label: "助攻",
    prop: "助攻",
  },
  {
    label: "资源",
    prop: "战备资源",
  },
  {
    label: "人伤",
    prop: "人伤",
  },
  {
    label: "塔伤",
    prop: "塔伤",
  },
  {
    label: "治疗值",
    prop: "治疗值",
  },
  {
    label: "承伤",
    prop: "承伤",
  },
  {
    label: "重伤",
    prop: "重伤",
  },
  {
    label: "青灯焚骨",
    prop: "青灯焚骨",
  },
  {
    label: "战复",
    prop: "战复",
  },
  {
    label: "控制",
    prop: "控制",
  },
  {
    label: "总伤",
    prop: "总伤",
  },
  {
    label: "参团率",
    prop: "参团率",
  },
];

watch(
  () => store.state.objectType,
  () => {
    datas.value = store.getters.getOverviewData;
    processOccupation();
    processGroup();
  }
);

const formatNumber = computed(() => (number) => {
  return new Intl.NumberFormat().format(number);
});

/** 按职业 */
const processOccupation = () => {
  const {
    occupation: { list, max },
  } = datas.value;
  occupationMax.value = max;
  occupationData.value = list;
};
/** 按团 */
const processGroup = () => {
  const {
    group: { list, max },
  } = datas.value;
  groupMax.value = max;
  groupData.value = list;
};

onMounted(() => {
  processOccupation();
  processGroup();
});
</script>

<style scoped></style>
